<template>
    <overallconfig :data="props.data"> 
      <template #properties>
            <el-form-item label="栅格间隔：">
                <el-input type="number" v-model="props.data.options.gutter" clearable/>
            </el-form-item>

            <el-form-item label="水平排列方式：">
                <el-select v-model="props.data.options.justify">
                    <el-option label="左边" value="start" />
                    <el-option label="右边" value="end" />
                    <el-option label="居中" value="center" />
                    <el-option label="围绕" value="space-around" />
                    <el-option label="间隔" value="'space-between" />
                    <el-option label="均匀间隔" value="space-evenly" />
                </el-select>
            </el-form-item>

            <el-form-item label="垂直排列方式：">
                <el-select v-model="props.data.options.align">
                    <el-option label="顶部" value="top" />
                    <el-option label="中间" value="middle" />
                    <el-option label="底部" value="bottom" />
                </el-select>
            </el-form-item>

            <el-form-item label="自定义元素标签">
                <el-input v-model="props.data.options.tag" clearable/>
            </el-form-item>
      </template>
    </overallconfig>
</template>

<script setup>
import overallconfig from "../overallconfig.vue"

// 接收父节传入点参数
const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    }
})
</script>